<template>
  <div class="product">
    <!-- 搜索框 -->
    <div class="search">
      <template>
        <el-select
          v-model="searchValue"
          filterable
          clearable
          remote
          @change="searchTextChange"
          @clear="clear"
          placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in searchList"
            :key="item.sId"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </template>
      <!-- 搜索按钮 -->
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="onSearchButtonClick"
        plain
      ></el-button>
      <!-- 添加按钮 -->
      <el-button type="primary" @click="addStu" :disabled="disabled"
        >添加项目</el-button
      >
    </div>
    <!-- 班级选择 -->
    <div class="select-class">
      <!-- 框框 -->
      <el-form>
        <el-form-item label="选择班级:">
          <el-select
            v-model="classes"
            filterable
            @visible-change="classVisible"
            @change="classChange"
            placeholder="请选择"
          >
            <el-option
              v-loading="selectLoading"
              label="全部"
              value="all"
            ></el-option>
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in classList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 导出excel -->
    <!-- <div class="exportExcel">
      <el-button icon="iconfont icon-excel" @click="exportExcel"
        >导出excel数据</el-button
      >
    </div> -->
    <!-- 表格 -->
    <div class="stu-table">
      <el-table :data="stuData" v-loading="loading" border style="width: 100%">
        <el-table-column
          prop="headimgurl"
          align="center"
          label="头像"
          width="100"
        >
          <!-- 插槽作用域 -->
          <template v-slot="scope">
            <el-avatar
              shape="square"
              :size="50"
              fit="fill"
              :src="scope.row.headimgurl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" width="120" label="姓名">
        </el-table-column>
        <el-table-column prop="degree" align="center" label="学历">
        </el-table-column>
        <el-table-column prop="class" align="center" label="班级">
        </el-table-column>
        <el-table-column prop="productUrl" align="center" label="项目">
        </el-table-column>
        <el-table-column prop="cTime" align="center" label="创建时间">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button
              circle
              type="primary"
              class="btn"
              icon="el-icon-view"
              @click="showStu(row)"
            ></el-button>
            <el-button
              circle
              type="success"
              class="btn"
              icon="el-icon-edit"
              @click="editStu(row)"
            ></el-button>
            <el-button
              circle
              type="danger"
              class="btn delBtn"
              icon="el-icon-delete"
              @click="deleteStu(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        @current-change="changePage"
        :page-size="stuPageSize"
        :total="stuTotal"
      >
      </el-pagination>
    </div>
    <!-- dialog弹出框 -->
    <qf-dialog></qf-dialog>
  </div>
</template>
<script>
import dialog from "../../../../components/Dialog/index.vue";
import * as api from "../../../../api/users";
import { mapState, mapActions, mapMutations } from "vuex";
// import qee from "qf-export-excel"

export default {
  data() {
    return {
      dataCount: 3,
      // loading: true,
      // stuData: [],
      searchValue: "",
      searchList: [],
      selectLoading: true,
      classes: "", //select绑定的班级
      classList: [], //班级列表
    };
  },
  computed: {
    ...mapState(["stuData", "loading", "stuTotal", "stuPageSize"]),
  },

  components: {
    "qf-dialog": dialog,
  },

  created() {
    this.GET_STULIST();
    // this.HIDE__DIALOG()
    // this.getStuList();
  },
  methods: {
    ...mapActions(["GET_STULIST"]),
    ...mapMutations([
      "SHOW_DIALOG",
      "HIDE_DIALOG",
      "CHANGE_DIALOG_TITLE",
      "SET_CURRENT_ROW",
      "SET_STU_DATA",
    ]),
    // //获取表格数据
    // getStuList(params = { count: 10, page: 1, classes: "" }) {
    //   //发送请求学院的数据
    //   api.getStulistApi().then((res) => {
    //     console.log(res);
    //     this.stuData = res.data.data;
    //     this.loading = false;
    //   });
    // },
    addStu() {
      //弹出dialog
      this.SHOW_DIALOG();
      this.CHANGE_DIALOG_TITLE("增加学员信息");

      //将这条数据回显到dialog弹出框中 通过vuex修改currentRow的值
    },
    editStu(row) {
      this.SHOW_DIALOG();
      this.CHANGE_DIALOG_TITLE("编辑学员信息");
      // console.log(row)
      //将当前这一行数据回显到dialog弹出框中
      this.SET_CURRENT_ROW(row);
    },
    deleteStu(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.delStuApi(row.sId).then((res) => {
            console.log(res);
            if (res.data.state) {
              //删除成功，更新列表
              this.GET_STULIST();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              //删除失败，这条数据已经被别人删除了
              this.$message.error("删除失败，数据不存在！");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
          });
        });
    },
    // 选择班级
    classChange(query) {
      //query就是选中的option
      // console.log(query);
      // 1.select展开的时候，需要展示所有的班级列表
      // 2.选中班级列表的时候需要更新表格

      //调用 封装好的GET_STULIST，传递班级就可以了
      // console.log(query);
      //当query等于all的时候，表示要展示所有的班级

      if (query == "all") {
        query = ""; //将query重新赋值为空，因为不传的话，后台默认返回所有数据
      } else {
        this.GET_STULIST({ classes: query });
      }
    },
    //班级选择框展开/收起触发的事件
    classVisable(isVisable) {
      this.selectLoading = true;
      // console.log(isVisable);
      if (isVisable) {
        //下拉框出现了，发送请求，获取班级列表
        api.getClassesApi().then((res) => {
          // console.log(res);
          this.classList = res.data.data;
          // console.log(this.classList);
          this.selectLoading = false;
        });
      }
    },
    changePage(page) {
      // console.log(page);
      //页码变更，传给后台，重新获数据
      this.GET_STULIST({ page });
    },
    remoteMethod(query) {
      // console.log(query);
      this.searchValue = query;
      //向后台发起请求
      api.searchStuApi(null, query, null).then((res) => {
        // console.log(res);
        this.searchList = res.data.data;
        // console.log(this.searchList);
      });
    },
    searchTextChange(searchText) {
      //发送请求，更新列表
      // console.log(searchText);
      api.searchStuApi(null, searchText, null).then((res) => {
        this.SET_STU_DATA(res.data); //vuex中更新表格数据的方法
      });
    },
    onSearchButtonClick() {
      // console.log(this.searchValue);
      api.searchStuApi(null, this.searchValue, null).then((res) => {
        // console.log(res);
        this.SET_STU_DATA(res.data);
      });
    },
    searchBlur() {},
  },

  meta: {
    title: "xyxmgl",
    icon: "iconfont icon-shangpinguanli",
    name: "学员项目管理",
  },
};
</script>
<style scoped lang="less">
.product {
  text-align: left;
  /deep/.search {
    margin: 12px 0;

    /deep/ .el-input__inner {
      width: 300px;
      padding-right: 20px;
    }
  }
  // .el-button {
  //   padding: 9px 12px;
  // }
  /deep/.delBtn {
    background-color: rgb(250, 91, 91);
    border-color: rgb(250, 91, 91);
  }
}

.pagination {
  text-align: center;
  margin: 20px 0;
}
</style>

